<template>
    <view class="list">
        <z-paging
            ref="paging"
            :refresher-out-rate="0.8"
            :auto-clean-list-when-reload="false"
            bg-color="#F5F5F5"
            :refresher-status.sync="refresherStatus"
            empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
            empty-view-text="暂无内容"
            v-model="dataList"
            @query="queryList"
        >
            <view class="item" v-for="(item, index) in dataList" :key="index">
                <view class="cellBox flex_wrap">
                    <view style="" @click.stop="toRequestDetail(item, 3)">
                        <u--image
                            :src="itemSrc(item)"
                            :lazy-load="true"
                            radius="16rpx"
                            width="180rpx"
                            height="180rpx"
                            style="margin: 20rpx"
                            ><template v-slot:loading>
                                <u-loading-icon></u-loading-icon> </template></u--image
                    ></view>
                    <view
                        class="flex_wrap flex_column"
                        style="margin-left: 40rpx"
                    >
                        <u--text
                            :text="item.letterName"
                            color="#3D3D3D"
                            size="32rpx"
                            :lines="2" />
                        <!--    :text="`${$u.timeFormat(item.endTime, 'yy/mm/dd')}`" -->
                        <u--text
                            :text="item.createTime"
                            color="#666666"
                            size="26rpx"
                            :customStyle="{ marginBottom: '40rpx' }"
                            :lines="1" />
                        <view class="flex_wrap">
                            <u-icon
                                name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/02/02/dbd134bf849145628c79a4e50507457a.png"
                                bold
                                label="编辑"
                                labelSize="26rpx"
                                size="40rpx"
                                @click.stop="toRequestDetail(item, 1)"
                                labelColor="#3D3D3D"
                            />
                            <view style="width: 50rpx"></view>
                            <u-icon
                                name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/02/02/b0b6e7c1fdea4e85a3d4594e8e6ba9aa.png"
                                label="删除"
                                labelSize="26rpx"
                                size="40rpx"
                                @click.prevent.stop="toRequestDetail(item, 2)"
                                labelColor="#3D3D3D"
                            />
                            <view style="width: 30rpx"></view>
                            <button
                                open-type="share"
                                style="background: transparent"
                                @click.stop="
                                    () => {
                                        shareItem = item;
                                    }
                                "
                            >
                                <u-icon
                                    name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/02/02/eb2b7d0832314f40a2bc34e86d90ea37.png"
                                    bold
                                    label="分享"
                                    labelSize="26rpx"
                                    size="40rpx"
                                    labelColor="#3D3D3D"
                                />
                            </button> </view
                    ></view>
                </view>
            </view>
            <view slot="bottom">
                <view class="bottom">
                    <u-button
                        text="立即制作"
                        :customStyle="buttonCustomStyle"
                        shape="circle"
                        @click="toInitiateMeeting"
                    />
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import {
    businessInvitationLetterList,
    deleteFun,
} from "@/api/invitationCardMake";
let meetId = "";
export default {
    computed: mapGetters(["userInfo"]),
    options: {
        styleIsolation: "shared", // 解除样式隔离
    },
    data() {
        return {
            shareItem: {},
            buttonCustomStyle: {
                height: "74rpx",
                width: "694rpx",
                backgroundColor: "#588BF3",
                fontSize: "#FFF",
                margin: "0 auto",
                color: "#FFF",
            },

            dataList: [1, 2, 3, 4, 5],
            showFilter: false,
            signUpId: null,
            customButtonStyle: {
                // 报名按钮自定义样式
                width: "158rpx",
                height: "60rpx",
                fontSize: "28rpx",
                margin: "0",
            },
        };
    },
    computed: {
        itemSrc() {
            return ({ config }) => {
                if (config) {
                    config = JSON.parse(config);
                    console.log("config :>> ", config);
                    return config.templates && config.templates[0]["image"];
                }
            };
        },
    },
    onLoad(o) {
        meetId = o?.meetId ?? "";
        console.log("o :>> ", o);
    },
    onShow() {
        this.$refs.paging.reload();
    },
    methods: {
        //立即制作
        toInitiateMeeting() {
            uni.$u.route({
                url:
                    "pages_invitationCard/templatePages/index?meetId=" + meetId,
            });
        },
        //
        toRequestDetail(item, type) {
            switch (type) {
                case 1:
                    // 编辑
                    uni.$u.route({
                        url: `pages_invitationCard/makeCard/index?type=edit&meetId=${meetId}&id=${item.id}&letterName=${item.letterName}`,
                    });
                    break;
                case 3:
                    // 邀请函
                    uni.$u.route({
                        url: "/pages_swiper/index/index?id=" + item.id,
                    });
                    break;
                case 2:
                    const that = this;
                    uni.showModal({
                        title: "",
                        content: "确定要删除吗？",
                        success({ confirm, cancel }) {
                            if (confirm) {
                                deleteFun(item.id).then((res) => {
                                    if (res.code === 200) {
                                        uni.$u.toast("删除成功！");
                                        that.$refs.paging.reload();
                                    }
                                });
                            }
                        },
                    });
                    break;
            }
        },

        async queryList(pageNo, pageSize) {
            const that = this;
            const params = {
                pageSize: pageSize,
                pageNum: pageNo,
                status: 1,
                meetId,
            };
            let result;
            result = await businessInvitationLetterList(params);
            that.$refs.paging.completeByTotal(result.data.rows, result.total);
        },
    },
    onShareAppMessage() {
        let { config, id, letterName } = this.shareItem;
        if (config) config = JSON.parse(config);
        const shareData = {
            title: letterName,
            imageUrl: config && config.templates[0]["image"],
            path: "/pages_swiper/index/index?id=" + id,
        };
        console.log("2222222 :>> ", shareData);
        return shareData;
    },
};
</script>

<style lang="scss" scoped>
.item {
    // padding: 50rpx;
    padding: 10rpx 28rpx;
    box-sizing: border-box;
}

.bottom {
    width: 100%;
    height: 100rpx;
    background-color: #fff;
}

.cellBox {
    background: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 20rpx;
}
::v-deep .u-cell__body {
    padding: 0 !important;
}
</style>
